<template>
  <div class="goodsType" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="商品分类" background-color="linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%)"></myHead>
    <div class="addType">
      <div class="name">商品分类</div>
      <div class="content">
        <input type="text" placeholder="请输入添加商品分类名称" v-model="nameType"></input>
      </div>
    </div>
    <div class="box" v-for="(item,index) in goodsList" :key="index">
      <div class="box_top">
        <div class="name">{{item.name}}</div>
        <div class="edit" @click="edit(item.id)">编辑</div>
        <div class="del" @click="del(item.id)">
          <img src="../../../static/img/business/delType.png" alt="">
        </div>
      </div>
    </div>
    <div class="atn" @click="save">
      保存
    </div>
    <van-dialog v-model="show" title="编辑分类" confirmButtonColor="#FB4448" cancelButtonColor="#333333" show-cancel-button @confirm="submit()">
      <input class="dialog" type="text" placeholder="请输入新的商品分类名称" v-model="value" />
    </van-dialog>
  </div>
</template>

<script>
  import myHead from "../../components/BusinessComponents/lib/myHead";
  export default {
    name: "goodsType",
    inject:["reload"],
    components:{
      myHead,
    },
    data() {
      return {
        nameType:'',
        value:"",
        show:false,
        category_id:0,
        store_info:{},
        goodsList:[]
      }
    },
    methods:{
      save(){
        this.$myAxios('store/goodsCategory/add', 'post', {
          store_id:this.store_info.id,
          pid:0,
          name:this.nameType,
          image:"",
          description:"",
          type:"shop",
          status:"normal"
        }).then(res => {
          if(res.data.code == 1){
            this.$myNotice(res.data.msg,2000);
            this.reload()
          }else{
            this.$myNotice(res.data.msg,2000)
          }
        })
      },
      edit(id){
        this.show = true;
        this.category_id = id;
      },
      submit(){
        this.$myAxios('store/goodsCategory/edit', 'post', {
          store_id:this.store_info.id,
          category_id:this.category_id,
          pid:0,
          name:this.value,
          image:"",
          description:"",
          type:"shop",
          status:"normal"
        }).then(res => {
          if(res.data.code == 1){
            this.$myNotice(res.data.msg,2000);
            this.reload()
          }else{
            this.$myNotice(res.data.msg,2000)
          }
        })
      },
      del:function (id) {
        this.$myAxios('store/goodsCategory/delete', 'post', {
          store_id:this.store_info.id,
          category_id:id
        }).then(res => {
          if(res.data.code == 1){
            this.$myNotice(res.data.msg,2000);
            this.reload()
          }else{
            this.$myNotice(res.data.msg,2000)
          }
        })
      }
    },
    mounted() {
      this.present = this.$route.path;
      this.store_info = JSON.parse(localStorage.getItem("storeInfo"));
      this.$myAxios('api/goodsCategory/category_list', 'get', {
        store_id:this.store_info.id,
      }).then(res => {
        this.goodsList = res.data.data.list
      })
    }
  }
</script>

<style scoped>
  >>>.van-dialog__header{
    line-height:.24rem;
    padding-top:.24rem;
  }
  >>>.van-dialog__content{
    margin: .16rem .12rem .23rem;
  }
  >>>.van-dialog{
    width: 3.2rem;
    font-size: .16rem;
    border-radius:.16rem;
  }
  >>>.van-button{
    font-size: .16rem;
    height: .5rem;
    line-height: .48rem;
  }
  >>>.van-picker__toolbar{
    display: none;
  }
  >>>.van-picker-column{
    font-size: .16rem;
  }
  >>>.van-picker-column__item{
    height: .44rem !important;
  }
  .dialog{
    width: calc(100% - 0.18rem);
    height: .36rem;
    border: none;
    background: #F6F6F6;
    border-radius: .08rem;
    padding: 0 .09rem;
    font-size: .14rem;
  }
  .goodsType{
    padding-top: .51rem;
    background-color: #F5F5F5;
  }
  .addType{
    display: flex;
    align-items: center;
    padding: 0 .2rem;
    background-color: #ffffff;
    margin-bottom: .1rem;
  }
  .name{
    font-size: .14rem;
    line-height: .2rem;
    color: #333333;
    margin-right: .2rem;
  }
  .content{
    flex-grow: 1;
    height: .4rem;
    overflow: hidden;
  }
  .content input{
    width: 100%;
    border: none;
    height: .38rem;
  }
  .box {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);
    border-bottom: 1px solid #F5F5F5;
  }
  .box_top{
    display: flex;
    justify-content: space-between;
    margin: 0 .1rem;
    padding: .15rem 0;
  }
  .box_top .name{
    flex-grow: 1;
  }
  .edit{
    margin: 0 .2rem;
    color: #FB4B4B;
  }
  .del{
    width: .17rem;
  }
  .atn{
    position: fixed;
    bottom: .1rem;
    width: 3.4rem;
    height: .5rem;
    line-height: .5rem;
    border-radius: .25rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    background: linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%);
    font-size: .15rem;
    color: #ffffff;
  }
</style>
